import React, { Component } from 'react'

export default class TabB extends Component {
  constructor() {
    super()
    console.log("01-constructor");
  }
  state = {
    obj: {
      useTime: []
    },
    count: 100
  }
  // mounted
  componentDidMount() {
    console.log("03-componentDidMount");
    this.timer = setInterval(() => {
      console.log(Date.now());
    }, 1000);
  }
  // 更新阶段,获取更新props，更新state
  shouldComponentUpdate(newProps,newState){
    const {count} = this.state
    if(count == newState.count){
      return false
    }

    return true
  }
  componentDidUpdate(){
    console.log("componentDidUpdate");
  }
  componentWillUnmount(){
    console.log("componentWillUnmount");
    clearInterval(this.timer)
  }
  contenChange = (event) => {
    const { obj } = this.state
    const element = event.target
    const value = element.value
    //获取element这个表单组件的name属性。对象key，value对象值
    const key = element.name
    if (key == "useTime") {
      if (element.checked) {
        obj.useTime.push(value)
      } else {
        const index = obj.useTime.findIndex(item => item == value)
        obj.useTime.splice(index, 1)
      }
    } else {
      obj[key] = value
    }
    this.setState({
      obj
    })
  }
  render() {
    console.log("02-render");
    return (
      <React.Fragment>
        <p>{this.state.count}</p>
        <button onClick={()=>this.setState({count:200})}>更新</button>
        <div onChange={this.contenChange}>
          <div className='item'>
            <label htmlFor="">优惠券名字：</label>
            <input type="text" name='title' placeholder='请输入优惠券名字' />
          </div>
          <div className='item'>
            <label htmlFor="">优惠券价格：</label>
            <input type="text" name='price' />
          </div>
          <div className='item'>
            <label htmlFor="">优惠券类型：</label>
            <select name="receiveType" id="">
              <option value="">请选择</option>
              <option value="1">新人券</option>
              <option value="2">门槛券</option>
              <option value="3">通用券</option>
            </select>
          </div>
          <div className='item'>
            <label htmlFor="">优惠券状态：</label>
            <span>开启</span>
            <input type="radio" value={true} name='state' />
            <span>关闭</span>
            <input type="radio" value={false} name='state' />
          </div>
          <div>
            <label htmlFor="">日期:</label>
            <span>2023-01-02</span>
            <input type="checkbox" name='useTime' value="2023-01-02" />
            <span>2023-04-02</span>
            <input type="checkbox" name='useTime' value="2023-04-02" />
          </div>
          <div className='item'>
            <button>添加</button>
          </div>
        </div>
      </React.Fragment>

    )
  }
}
